import React, { useState } from 'react'
// 按钮组件
import { Card, Form, Input, Checkbox, Button } from 'antd'
// 导入图片对象
import logo from '@/assets/logo.png'
// 导入样式
import './index.scss'
// 手机号码的验证提示
let tips = '手机号码必须是11位数字，1开头，中间是3-9'
// 验证规则
const validateMobile = (e) => {
  const reg = /^1[3-9]\d{9}$/
  if (reg.test(e.target.value)) {
    tips = ''
    return {
      validateStatus: 'success',
      errorMsg: null,
    }
  }
  return {
    validateStatus: 'error',
    errorMsg: '必须是有效的手机号码!',
  }
}
export default function Login() {
  // 定义手机号码
  const [mobile, setMobile] = useState({
    value: '',
  })

  // 改变手机号码的
  const onMobileChange = (value) => {
    setMobile({
      value,
      ...validateMobile(value),
    })
  }

  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="null" />
        {/* 登录表单 */}
        <Form size="large">
          <Form.Item
            name="mobile"
            validateTrigger={['onChange', 'onBlur']}
            validateStatus={mobile.validateStatus}
            help={mobile.errorMsg || tips}
            rules={[
              { required: true, message: '请输入手机号' },
              /* {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号码格式不对',
              }, */
            ]}
          >
            <Input
              placeholder="请输入手机号"
              onChange={onMobileChange}
              onBlur={onMobileChange}
              value={mobile.value}
            />
          </Form.Item>
          <Form.Item>
            <Input placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Checkbox defaultChecked={true}>
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
